<template>
  <div class="common-chart-container">
    <template v-if="dataset && dataset.source && dataset.source.length">
      <component
        :is="type"
        :dataset="dataset"
        @chartClick="$emit('chartClick', $event)"
      ></component>
    </template>
    <div class="chart-tooltip" v-else>
      <i class="iconfont icon-wushuju"></i>
      <span class="tip-content">暂无数据</span>
    </div>
  </div>
</template>

<script>
import ChartCirque from "./charts/ChartCirque";
import ChartBar from "./charts/ChartBar";
import ChartColumn from "./charts/ChartColumn";
import ChartPie from "./charts/ChartPie";
import ChartLine from "./charts/ChartLine";
import ChartGauge from "./charts/ChartGauge";
import ChartRelation from "./charts/ChartRelation";
import ChartPieLine from "./charts/ChartPieLine";
import ChartScatter from "./charts/ChartScatter";
import ChartLineBar from "./charts/ChartLineBar";
import ChartTree from "./charts/ChartTree";
import ChartSimple from "./charts/ChartSimple";
import ChartWordCloud from "./charts/ChartWordCloud.vue";
import ChartKpiMultiple from "./charts/ChartKpiMultiple.vue";
import Sankey from "./charts/Sankey.vue";
import Funnel from "./charts/Funnel.vue";

export default {
  name: "CommonChart",
  props: {
    type: {
      type: String,
      default: "chart-line",
    },
    dataset: {
      type: Object,
      default: () => ({
        dimensions: [],
        source: [],
        option: {}, // 图表自定义配置项
      }),
    },
  },
  computed: {
    isShow() {
      return dataset.source;
    },
  },
  components: {
    ChartCirque,
    ChartBar,
    ChartColumn,
    ChartPie,
    ChartLine,
    ChartGauge,
    ChartRelation,
    ChartPieLine,
    ChartScatter,
    ChartLineBar,
    ChartTree,
    ChartSimple,
    ChartWordCloud,
    ChartKpiMultiple,
    Sankey,
    Funnel,
  },
};
</script>

<style scoped lang="scss">
.common-chart-container {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.chart-tooltip {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0.5;

  .icon-wushuju {
    font-size: 36px;
  }

  .tip-content {
    font-size: 12px;
  }
}
</style>
